CSS_based animation - box animations

code:
            <div class="prime">
                <div class="letter-image">
                    <div class="animated-mail">
                        <div class="back-fold"></div>
                        <div class="letter">
                                <div class="letter-border"></div>
                                <div class="letter-title"></div>
                                <div class="letter-context"></div>
                                <div class="letter-stamp">
                                <div class="letter-stamp-inner"></div>
                                </div>
                        </div>
                        <div class="top-fold"></div>
                        <div class="body"></div>
                        <div class="left-fold"></div>
                    </div>
                    <div class="shadow"></div>
                </div>
            </div>
            <style>
                .prime {background: #323641; width:35vw; height: 40vh;}
                .letter-image {position: relative; top: 50%; left: 50%; width: 20vw; height: 20vw; 
                    -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); 
                    transform: translate(-50%, -50%); cursor: pointer; }
                .animated-mail {position: absolute; height: 15vw; width: 20vw; -webkit-transition: .4s; 
                    -moz-transition: .4s; transition: .4s;}
                .body {position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; 
                    border-width: 0 0 10vw 20vw;  border-color: transparent transparent #e95f55 transparent; 
                    z-index: 2;} 
                .top-fold {position: absolute; top: 5vw; width: 0; height: 0; border-style: solid; 
                    border-width: 5vw 10vw 0 10vw; -webkit-transform-origin: 50% 0%; 
                    -webkit-transition: transform .4s .4s, z-index .2s .4s; -moz-transform-origin: 50% 0%; 
                    -moz-transition: transform .4s .4s, z-index .2s .4s; transform-origin: 50% 0%; 
                    transition: transform .4s .4s, z-index .2s .4s; order-color: #cf4a43 transparent transparent 
                    transparent; z-index: 2;}
                .back-fold {position: absolute; bottom: 0; width: 20vw; height: 10vw; background: #cf4a43; 
                    z-index: 0;}
                .left-fold {position: absolute; bottom: 0; width: 0; height:  0; border-style: solid; 
                    border-width: 5vw 0 5vw 10vw; border-color: transparent transparent transparent #e15349; 
                    z-index: 2;}
                .letter {left: 2vw; bottom: 0vw; position: absolute; width: 16vw; height: 6vw; background: white;
                    z-index: 1; overflow: hidden; -webkit-transition: .4s .2s; -moz-transition: .4s .2s; 
                    transition: .4s .2s;}
                .letter-border { height: 1vw; width: 100%; background: repeating-linear-gradient(-45deg, #cb5a5e, 
                    #cb5a5e .8vw, transparent .8vw, transparent 1.8vw);}
                .letter-title {margin-top: 1vw; margin-left: .5vw; height: 1vw; width: 40%; background: #cb5a5e;}
                .letter-context {margin-top: 1vw; margin-left: .5vw; height: 1vw; width: 20%; background: #cb5a5e;}
                .letter-stamp {margin-top: 3vw; margin-left: 12vw; border-radius: 100%; height: 3vw; width: 3vw; 
                    background: #cb5a5e; opacity: 0.3;}
                .shadow {position: relative; top: 20vw; left: 50%; width: 40vw; height: 3vw; transition: .4s; 
                    transform: translateX(-50%); -webkit-transition: .4s; -webkit-transform: translateX(-50%); 
                    -moz-transition: .4s; -moz-transform: translateX(-50%); border-radius: 100%; 
                    background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));}
                .letter-image:hover .animated-mail{transform: translateY(5vw);  -webkit-transform: translateY(5vw);
                    -moz-transform: translateY(5vw);}
                .animated-mail:hover .top-fold {transition: transform .4s, z-index .2s; transform: rotateX(180deg); 
                    -webkit-transition: transform .4s, z-index .2s; -webkit-transform: rotateX(180deg);
                    -moz-transition: transform .4s, z-index .2s; -moz-transform:  rotateX(180deg); z-index: 0; }
                .letter-image:hover .animated-mail .letter{height: 18vw;}
                .shadow:hover { width: 25vw;}
            </style>
        

code:
            <div id="second">
                <div id="parcel">📦</div>
            </div>
            <style>
                @keyframes pop {
                    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
                    50% { transform: translate(-50%, -150%) scale(1, 1); }
                    55% { transform: translate(-50%, -150%) rotate(15deg); }
                    60% { transform: translate(-50%, -150%) rotate(-15deg); }
                    65% { transform: translate(-50%, -150%) rotate(15deg); }
                    70% { transform: translate(-50%, -150%) rotate(-15deg); }
                    100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
                }
                #second{background: #7db9e8;  background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%,
                    #21374b 100%); background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#21374b 100%); 
                    background: radial-gradient(ellipse at center, #7db9e8 0%,#21374b 100%); margin: 1vw; 
                    width: 30vw; height: 40vh;}
                #parcel {position: absolute; left: 15%; top: 1120vw; z-index: 2; margin-bottom: 3vw; 
                    transform: translate(-25%, -25%); font-size: 7vw; animation: poppy 6s infinite;}
            </style>